<template>
  <div class="form">
    <div class="inputBox">
      <label for="">x</label>
      <input type="text" v-model="x" />
    </div>
    <div class="inputBox">
      <label for="">y</label>
      <input type="text" v-model="y" />
    </div>
    <div class="inputBox">
      <label for="">大小</label>
      <input type="text" v-model="fontSize" />
    </div>
    <div class="inputBox">
      <label for="">颜色</label>
      <input type="color" name="" id="" v-model="fill" />
    </div>
    <div class="inputBox">
      <label for="">文本</label>
      <input type="text" v-model="text" />
    </div>
    <div class="inputBox">
      <button @click="addText">addText</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRaw, toRefs } from "vue";
import * as d3 from "d3";
import { textDrawAdd } from "../../util/geoDrawAdd.js";

export default {
  setup() {
    const text = reactive({
      x: 44,
      y: 44,
      fontSize: 12,
      fill: "#000",
      text: "",
    });

    function addText() {
      const geo = {};
      Object.assign(geo, toRaw(text));
      textDrawAdd(geo);
    }

    return { ...toRefs(text), addText };
  },
};
</script>